<template>
  <el-container style="height: 100%;">
    <el-main>
      <div class="el-card">
        <!-- 方向 -->
        <el-dropdown>
          <span class="el-dropdown-link">方向</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="{ label, value } in rankdirList"
                :key="value"
                :disabled="appStore.rankdir === value"
                @click="appStore.rankdir = value, layout(graph)"
              >{{ label }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- 导出 -->
        <el-dropdown>
          <span class="el-dropdown-link">导出</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="graph.exportSVG()">SVG</el-dropdown-item>
              <el-dropdown-item @click="graph.exportPNG()">PNG</el-dropdown-item>
              <el-dropdown-item @click="graph.exportJPEG()">JPEG</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- 快捷键 -->
        <el-popover title="快捷键"  >
          <template #reference>
            <el-icon><InfoFilled /></el-icon>
          </template>
          <div>新增子主题<span>Tab</span></div>
          <div>新增同级主题<span>Enter</span></div>
          <div>新增父主题<span>Shift+Tab</span></div>
          <div>复制<span>Ctrl+C</span></div>
          <div>剪切<span>Ctrl+X</span></div>
          <div>粘贴<span>Ctrl+V</span></div>
          <div>删除<span>Del</span></div>
          <div>撤销<span>Ctrl+Z</span></div>
          <div>恢复<span>Ctrl+Y</span></div>
          <div>节点上移<span>Ctrl+⬆</span></div>
          <div>节点下移<span>Ctrl+⬇</span></div>
        </el-popover>
      </div>
      <div style="height: 100%;width: 100%;">
        <div id="container"></div>
      </div>
    </el-main>
    <el-aside width="200px" v-show="asideShow">
      <el-input
        ref="textareaRef"
        v-model="textarea"
        autosize
        type="textarea"
        wrap="off"
        @focus="focus"
        @blur="blur"
      />
    </el-aside>
  </el-container>
</template>

<script setup lang="ts" name="mindmap">
import type { ElInput } from 'element-plus';
import { initGraph, layout } from './X6'
import { onMounted, ref, watch } from 'vue'

// 方向
import { useAppStore } from '@/stores/app'
const appStore = useAppStore()
const rankdirList = [
  { label: '向右', value: 'LR' },
  { label: '向左', value: 'RL' },
  { label: '向下', value: 'TB' },
  { label: '向上', value: 'BT'}
]

const graph = ref()
const asideShow = ref(false)
const textareaRef = ref<InstanceType<typeof ElInput>>();
const textarea = ref('')
const nodeId = ref('')

watch(() => textarea.value, () => {
  const node = graph.value.getCellById(nodeId.value)
  node.toFront()
  node.setAttrByPath('text/text', textarea.value)

  setTimeout(() => {
    let textElement: SVGTextElement | null = document.querySelector(`g[data-cell-id='${nodeId.value}'] text`)
    const size = textElement?.getBBox() || { width: 0, height: 0 }
    node.resize(size.width + 24, size.height + 24)
  }, 1);
})

onMounted(() => {
  graph.value = initGraph()
  graph.value.on('node:click', (value: any) => {
    asideShow.value = true
    textarea.value = value.cell.getAttrByPath('text/text')
		// textareaRef.value && textareaRef.value.focus()
    nodeId.value = value.node.id
  })
})

function focus() {
  graph.value.startBatch('textarea')
}
function blur() {
  layout(graph.value)
  graph.value.stopBatch('textarea')
}

</script>

<style scoped lang="scss">
.el-header {
  padding: 0;
  border-bottom: 1px solid rgba(60, 60, 60, 0.12);
}
.el-main {
  padding: 0;
  border-right: 1px solid rgba(60, 60, 60, 0.12);
}
.el-aside {
  border-right: 1px solid rgba(60, 60, 60, 0.12);
}
.el-menu {
  border-right: none;
}
.el-icon {
  padding: 7px 0;
  cursor: pointer;
  color: var(--el-color-info);
}
.el-popover {
  div {
    font-size: 12px;
    display: flex;
    span {
      margin-left: auto;
    }
  }
}
.el-card {
  height: 30px;
  margin: 6px;
  position: absolute;
  z-index: 9999;
  box-shadow: var(--el-box-shadow-light);
  padding: 0 12px;
}

:deep(#container) {
  .x6-node-selected {
    rect {
      stroke: var(--el-color-primary);
      stroke-width: 2px;
    }
  }
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  line-height: 30px;
  padding-right: 12px;
}
</style>
